@(id: String)(implicit request: RequestHeader)
@main("任务详情")("sampleCompare") {

	<link rel="stylesheet" media="screen" href="@routes.Assets.at("stylesheets/plugins.min.css")">

	<script src="@routes.Assets.at("easy-pie-chart-2.1.6/dist/jquery.easypiechart.min.js")" type="text/javascript"></script>
	<script src="@routes.Assets.at("javascripts/App.min.js")" type="text/javascript"></script>
	<script src="@routes.Assets.at("javascripts/plugins.min.js")" type="text/javascript"></script>

	<style>
			.genome-pre {
				white-space: pre-wrap;
				word-wrap: break-word;
				border: 0px solid #ccc;
				background-color: white;
			}

			.mySelected {
				background-color: #c0edf1
			}

			.myTab {
				cursor: pointer;
			}

	</style>


	<div class="page-content">

		<div class="page-bar">
			<ul class="page-breadcrumb">
				<li>
					<i class="fa fa fa-object-group"></i>
					<a href="@routes.SampleController.sampleCompareBefore()">样品比较</a>
					<i class="fa fa-angle-right"></i>
				</li>
				<li>
					<span >任务详情</span>
				</li>
			</ul>
		</div>

		<div class="row" style="">

			<div class="col-sm-6" style="margin-left: 5px;
				vertical-align: center">

				<form class="registration-form form-horizontal" id="form"
				accept-charset="UTF-8" method="post">

					<div class="form-group">
						<label class="control-label col-sm-2" style="padding-top: 4px">任务名称:</label>
						<div class="col-sm-6">
							<select class="form-control" name="id" style="width: 100%"
							onchange="CompareMissionDetail.idChange(this)">
							</select>
						</div>
					</div>

				</form>

			</div>

		</div>


		<div class="row">

			<div class="row-fluid col-sm-12" >
				<div class="row">
					<div class="col-md-12 col-sm-12">
						<div class="portlet blue-dark box">
							<div class="portlet-title">
								<div class="caption">
									任务信息
								</div>
							</div>

							<div class="portlet-body" style="">
								<div class="table-responsive">

									<form class="form-horizontal" role="form" id="mission">
										<div class="form-body">
												<!--/row-->

											<div class="row">
												<div class="col-md-12">
													<div class="form-group">
														<label class="control-label col-md-2">样品1:</label>
														<div class="col-md-4">
															<p class="form-control-static" id="sample1">  </p>
														</div>
														<label class="control-label col-md-2">样品2:</label>
														<div class="col-md-4">
															<p class="form-control-static" id="sample2">  </p>
														</div>
													</div>
												</div>
											</div>

											<div class="row">
												<div class="col-md-12">
													<div class="form-group">
														<label class="control-label col-md-2">开始日期:</label>
														<div class="col-md-4">
															<p class="form-control-static" id="startTime">  </p>
														</div>
														<label class="control-label col-md-2">结束日期:</label>
														<div class="col-md-4">
															<p class="form-control-static" id="endTime">  </p>
														</div>
													</div>
												</div>

											</div>

										</div>
									</form>

								</div>
							</div>
						</div>
					</div>
				</div>

				<div id="sampleDetail">
					<style>
							.strTable > thead > tr > th, .strTable > tbody > tr > th, .strTable > tfoot > tr > th,
							.strTable > thead > tr > td, .strTable > tbody > tr > td, .strTable > tfoot > tr > td {
								vertical-align: middle;
								text-align: center;
							}

							#locusModal #detailTable tr td:last-child {
								max-width: 50px;
								width: 50px;
								overflow-wrap: break-word;
							}

							.myA {
								color: #ffffff;
							}

							.myA:hover {
								color: #c0edf1;
							}

							.myTd:hover {
								color: black;
							}

					</style>

					<div id="result" style="display: block">
						<div class="row">
							<div class="col-md-12 col-sm-12">

								<div id="myTabContent" class="tab-content">

									<div class="tab-pane fade in active" id="autoStr">

										<div class="portlet blue-dark box" id="str">
											<div class="portlet-title">
												<div class="caption" style="cursor: pointer;
													width: 98%" style="cursor: pointer;
													width: 98%" onclick="Tool.expand(this)">
													STRs位点长度信息散点图
												</div>
												<div class="tools">
													<a class="collapse" id="removeClick" disabled="true"></a>
												</div>
											</div>
											<div class="portlet-body" id="noCotent" style="display: block">
												<div class="tab-pane active " id="tab_1">
													<div id="scatterChart" style="max-width: 100%"></div>
												</div>
											</div>
											<div>
											</div>
										</div>

										<div class="portlet blue-dark box" id="snp">
											<div class="portlet-title">
												<div class="caption" style="cursor: pointer;
													width: 98%" onclick="Tool.expand(this)">
													iSNPs位点长度信息散点图
												</div>
												<div class="tools">
													<a class="collapse" id="removeClick" disabled="true"></a>
												</div>
											</div>
											<div class="portlet-body" id="noCotent" style="display: block">
												<div class="tab-pane active active in" id="tab_1">
													<div id="scatterChart" style="max-width: 100%"></div>
												</div>
											</div>
											<div>
											</div>
										</div>

										<div class="portlet blue-dark box" id="">
											<div class="portlet-title">
												<div class="caption" style="cursor: pointer;
													width: 98%" onclick="Tool.expand(this)">
													样品比较韦恩图
												</div>
												<div class="tools">
													<a class="collapse" id="removeClick" disabled="true"></a>
												</div>
											</div>
											<div class="portlet-body" id="noCotent" style="display: block">
												<div class="tab-pane active active in" id="tab_1">
													<div class="row">
														<div class="col-sm-4" id="total">
															<h4>Total</h4>
															<div id="totalContainer" style="max-width: 100%"></div>
														</div>
														<div class="col-sm-4" id="str">
															<h4>STRs</h4>
															<div id="strContainer" style="max-width: 100%"></div>
														</div>
														<div class="col-sm-4" id="snp">
															<h4>SNPs</h4>
															<div id="snpContainer" style="max-width: 100%"></div>
														</div>
													</div>


												</div>
											</div>
											<div>
											</div>
										</div>

										<div class="portlet blue-dark box">
											<div class="portlet-title">
												<div class="caption" style="cursor: pointer;
													width: 98%" style="cursor: pointer;
													width: 98%" onclick="Tool.expand(this)">
													不一致位点深度信息
												</div>
												<div class="tools">
													<a class="collapse" id="removeClick" disabled="true"></a>
												</div>
											</div>
											<div class="portlet-body" id="noCotent" style="display: block">
												<div class="tab-pane active " id="tab_1">

													<div id="strDiffData">
														<h3><span id="diffNum"></span> STRs</h3>
														<div class="form-inline  myInline" id="data">
														</div>
													</div>

													<div id="snpDiffData">
														<h3><span id="diffNum"></span> SNPs</h3>
														<div class="form-inline  myInline" id="data">
														</div>
													</div>

												</div>
											</div>
											<div>
											</div>
										</div>

									</div>

								</div>
							</div>
						</div>
					</div>


					<div id="locusModal" class="modal fade myModal">
						<div class="modal-dialog" style="width: 1000px">
							<div class="modal-content">
								<div class="modal-header">
									<button type="button" data-dismiss="modal" aria-hidden="true" class="close">
												&times;</button>
									<h4 class="modal-title">
										<span id="number" class="locus"></span></h4>
								</div>
								<div class="modal-body">

									<div class="row">

										<div class="col-sm-6" id="sample1">
											<h4>样品1：<span id="sampleName"></span></h4>

											<div class="table-responsive" id="tableContent">
												<table class="display table table-bordered detailTable" id="detailTable" style=""
												>
													<thead>
													</thead>
												</table>

											</div>

											<hr>
											<div align="center">
												<div id="strDetailChart" style=""></div>
											</div>

										</div>

										<div class="col-sm-6" id="sample2">
											<h4>样品2：<span id="sampleName"></span></h4>

											<div class="table-responsive" id="tableContent">
												<table class="display table table-bordered detailTable" id="detailTable" style=""
												>
													<thead>
													</thead>
												</table>

											</div>

											<hr>
											<div align="center">
												<div id="strDetailChart" style=""></div>
											</div>

										</div>
									</div>

								</div>
								<div class="modal-footer">
									<button type="button" data-dismiss="modal" class="btn btn-default ">关闭</button>
								</div>
							</div>
						</div>
					</div>

					<div id="snpModal" class="modal fade myModal">
						<div class="modal-dialog" style="width: 1000px">
							<div class="modal-content">
								<div class="modal-header">
									<button type="button" data-dismiss="modal" aria-hidden="true" class="close">
												&times;</button>
									<h4 class="modal-title">
										<span id="number" class="locus"></span></h4>
								</div>
								<div class="modal-body">
									<div class="row">

										<div class="col-sm-6" id="sample1">
											<h4>样品1：<span id="sampleName"></span></h4>
											<div class="table-responsive" id="tableContent">
												<table class="display table table-bordered detailTable" id="detailTable" style="word-break: break-all"

												>
													<thead>
													</thead>
												</table>

											</div>
											<hr>
											<div align="center">
												<div id="detailChart" style=""></div>
											</div>

										</div>

										<div class="col-sm-6" id="sample2">
											<h4>样品2：<span id="sampleName"></span></h4>
											<div class="table-responsive" id="tableContent">
												<table class="display table table-bordered detailTable" id="detailTable" style="word-break: break-all"

												>
													<thead>
													</thead>
												</table>

											</div>
											<hr>
											<div align="center">
												<div id="detailChart" style=""></div>
											</div>

										</div>
									</div>

								</div>
								<div class="modal-footer">
									<button type="button" data-dismiss="modal" class="btn btn-default ">关闭</button>
								</div>
							</div>
						</div>
					</div>

				</div>


			</div>

		</div>

	</div>


	<script>
			var id = "@id"

			function test() {
				$("#{gender} {kind}Percent").data("easyPieChart").update(percent)
			}

			function venn(divId, dict) {
				Highcharts.chart(divId, dict);
			}

			$(function () {
				CompareMissionDetail.init

			})
	</script>


}